<template>
  <view class="action-sheet">
    <m-overlay
      :visible="visible"
      width="700rpx"
      height="auto"
      background="transparent"
      position="bottom"
      @close="handleClose"
    >
      <view class="action-sheet__content">
        <view class="list">
          <view
            v-for="(menu, menuIndex) in menuItems"
            :key="menuIndex"
            class="list-button"
            :class="{ disabled: menu.disabled }"
            :style="[menu.color ? { color: menu.color } : {}]"
            @click="handleChoose(menu, menuIndex)"
          >
            {{ menu[optionTag] }}
          </view>
        </view>
      </view>
      <view v-if="cancelTxt" class="action-sheet__cancel" @click="handleCancel">
        <view class="list">
          <view class="list-button">
            {{ $t(cancelTxt) }}
          </view>
        </view>
      </view>
      <view style="height: 8rpx"></view>
    </m-overlay>
  </view>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    cancelTxt: {
      type: String,
      default: '',
    },
    optionTag: {
      type: String,
      default: 'name',
    },
    optionSubTag: {
      type: String,
      default: 'subname',
    },
    title: {
      type: String,
      default: '',
    },
    menuItems: {
      type: Array,
      default: () => [],
    },
  },
  emits: ['cancel', 'choose', 'update:visible'],
  setup(props, { emit }) {
    const handleClose = () => {
      emit('update:visible', false)
      emit('close')
    }
    const handleCancel = () => {
      emit('update:visible', false)
      emit('cancel')
    }
    const handleChoose = (menu, menuIndex) => {
      if (menu.disabled) {
        return
      }
      emit('update:visible', false)
      emit('choose', menu, menuIndex)
    }

    return { handleClose, handleCancel, handleChoose }
  },
})
</script>
<style lang="scss" scoped>
.action-sheet {
  .list {
    background-color: $--bg-content-c;
    border-radius: 16rpx;
    .list-button {
      &::after {
        border-bottom: 4rpx solid #eee;
      }
    }
  }
  .list-button {
    border-radius: 16rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    color: $--font-primary-c;
    position: relative;
    &.disabled {
      color: #e1e1e1 !important;
      cursor: not-allowed;
    }
    &::after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 24rpx;
      bottom: 0;
      left: 24rpx;
      transform: scaleY(0.5);
    }
    &:last-child {
      &:after {
        display: none;
      }
    }
  }
  &__content {
    margin: 24rpx 0;
  }
  &__cancel {
    margin: 24rpx 0;
    .list-button {
      color: $--font-regular-c;
    }
  }
}
</style>
